define(function(require){
    
    var $ = require('jquery');
    var _ = require('lib/underscore');
    var Backbone = require('lib/backbone');
    var ProductView = require('app/views/ProductView');
    var Product = require('app/models/Product');
    var ProductCollection = require('app/models/ProductCollection');
    
    var productList = new ProductCollection();
    
    return Backbone.View.extend({
        el: $("#productApp"),

        events: {
            "click .listProduct" : "listProducts",
            "click .resetList" : "resetList",
            "click .clearList" : "clearList"
        },
        
        initialize: function() {
            this.listenTo(productList, 'add', this.addOne);
            this.listenTo(productList, 'reset', this.addAll);
            this.listenTo(productList, 'all', this.render);
            productList.fetch();
        },

        render: function() {
            console.log("render AppView");
        },

        addOne: function(product) {
            var view = new ProductView({model: product});
            this.$('#productDiv').append(view.render().el);
        },

        addAll: function() {
            productList.each(this.addOne, this);
        },

        listProducts: function() {
            productList.add([
            new Product({id:"p3444444666777888", category: "c3"}),
            new Product({id:"p22222", category: "c2", displayName:"product 2 name", 
                description: "description 2", searchKeywords: "searchKeywords", 
                shoppingCart: {name: "sc2", image: {location: "www.baidu.com"}},
                productImage: {image: "www.baidu.com"}
            })
            ]);
        },

        resetList: function() {
            productList.reset([
             new Product({id:"p3", name:"product 3 name"}),
             new Product({id:"p4", name:"product 4 name"}),
             new Product({id:"p0", name:"product 0 name"})
            ]);

            productList.sort();
        },
        
        clearList: function() {
            productList.reset();
        }
   });
});